<template>
    <div>
        <div class="flex mb-3">
            <span class="text-lg">{{ title }}</span>
            <n-button quaternary class="ml-auto">查看更多</n-button>
        </div>

        <n-grid x-gap="12" :cols="4" class="mb-6">
            <n-gi v-for="(item, index) in pdata" :key="index">
                <CourseList :item="item" />
            </n-gi>
        </n-grid>
    </div>
</template>
<script setup>
// 引入naive-ui 组件
import { NButton, NGrid, NGi } from 'naive-ui';

// 引入接口
import { useGroupDataApi } from "~/apis/index.js";

// 引入Composition API
import { ref } from 'vue'

// 引用声明
const props = defineProps({
    title: {
        type: String,
        required: true
    },

    data: {
        type: Array,
        required: true
    },

    type: {
        type: String,
        default: () => "course"
    }
})


// 响应式数据
const pdata = ref(props.data || [])


// 判断是否是拼团数据
if (props.type === 'group') {
    const { data } = await useGroupDataApi({
        page: 1,
        usable: 1,
        limit: 2
    })
    pdata.value = data.value?.rows ?? [];
}


</script>